<template>
<!-- 这是订单评价页面 -->
  <div id="evaluate">
    <div v-if="hide">
      <div class="mainFrame">
        <!-- <h2>这是订单评价页面</h2> -->
        <div class="orderTitle">
          <h3>{{scoreTitle}}</h3>
          <div class="orderText">{{$t("orderDetails.orderNumber")}}：{{oevaluateList[0].ordersn}}</div>
        </div>
      </div>
      <div class="orderStatus">
          <h4>{{$t("GoodsDetail.commodityEvaluation")}}</h4>
          <div class="commodityEvaluation" v-for="(evaluateData, index) in oevaluateList" :key="index">
            <table class="ul_li_table">
              <tr>
                <td>
                  <div class="detail_Img"><router-link :to="{path:'/goodsDetail', query:{id: 1}}"><img :src="url + evaluateData.thumb" alt=""></router-link></div>
                </td>
                <td>
                  <div class="detail_Text"><router-link :to="{path:'/goodsDetail', query:{id: 1}}">{{evaluateData.title}}</router-link></div>
                </td>
                <td>
                  <div class="danjiaNum"> {{evaluateData.price}} 元 × {{evaluateData.total}}</div>
                </td>
                <td>
                  <div @click="evaluate(index)"><span>{{$t("GoodsDetail.evaluate")}} <i class="el-icon-arrow-down"></i></span></div>
                </td>
              </tr>
            </table>
            <el-collapse-transition>
              <div v-show="evaluateData.fold">
                <ul class="single">
                  <!-- <li><span class="evaluateText">评分</span><el-rate v-model="value" :show-text="true" :texts="texts"></el-rate></li> -->
                  <li v-if="scoreBool"><span class="evaluateText">{{$t("orderEvaluation.score")}}<i class="required">*</i></span><el-rate v-model="evaluateData.score" :show-text="true" void-color="#C0C4CC" :texts="texts"></el-rate></li>
                  <li><span class="evaluateText">{{$t("orderEvaluation.comment")}}<i class="required">*</i></span><el-input class="comment" type="textarea" :autosize="{ minRows: 2, maxRows: 8}" maxlength=300 resize="none" :rows="2" v-model.trim="evaluateData.comment" :placeholder="$t('orderEvaluation.hint')"></el-input></li>
                  <li>
                    <span class="evaluateText">{{$t("GoodsDetail.picture")}}</span>
                    <div class="uploadPictures">
                      <!-- 上传图片 -->
                      <el-upload
                        action="https://api.shop.uekea.com"
                        list-type="picture-card"
                        :limit="5"
                        :before-upload="beforeUpload"
                        :on-change="(file, fileList) => {handleChange(index)}"
                        :on-success="(response, file, fileList) => {uploadSuccess(fileList)}"
                        :on-error="(err, file, fileList) => {uploadError()}" 
                        :on-preview="handlePictureCardPreview"
                        :on-remove="(file, fileList) => {handleRemove()}">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                      </el-dialog>
                    </div>
                  </li>
                </ul>
              </div>
            </el-collapse-transition>
          </div>
          
        </div>
        <!-- <div>
          <h4>整单评价</h4>
          <ul class="single">
            <li><span class="evaluateText">评分</span><el-rate v-model="score2" :show-text="true" :texts="texts"></el-rate></li>
            <li><span class="evaluateText">评论</span><el-input class="comment" type="textarea" maxlength=150 resize="none" :rows="2" v-model="comment2" placeholder="请填写评论"></el-input></li>
            <li>
              <span class="evaluateText">晒图</span>
              <div class="uploadPictures">
                <el-upload
                  action="https://api.shop.uekea.com/"
                  list-type="picture-card"
                  :limit="3"
                  :before-upload="beforeUpload2"
                  :on-change="handleChange2"
                  :on-success="uploadSuccess2"
                  :on-error="uploadError2" 
                  :on-preview="handlePictureCardPreview2"
                  :on-remove="handleRemove2">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </div>
            </li>
          </ul>
        </div> -->
        <div class="submit">
          <button @click="submitComments">{{$t("orderEvaluation.submit")}}</button>
        </div>
      </div>
      <div class="noData" v-else>
        {{$t("orderEvaluation.noData")}}
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // imgUrl: "",   // 上传图片路径
      hide: true,       // 当没有数据时，是否隐藏评论
      texts: ["差评","一般","挺好","满意","非常满意"],  // 评分的辅助标语
      dialogImageUrl: "",   // 放大的浏览图片，有重复的，这个要修改
      dialogVisible: false,
      imgIndex: null,     // 上传图片的所在商品数组的下标
      imglist: [],    // 上传图片的路径
      oevaluateList: [],      // 传过来的值
      scoreTitle: this.$t("GoodsDetail.evaluate"),       // 标题
      scoreBool: true,      // 是否显示评分，正常显示评分，已评价的就不显示评分
      url: "https://mp.uekea.cn/attachment/", //图片拼接
      // score2: null,       // 整单评分
      // comment2: "",     // 整单评论
      wholeOrderImgs: [],     // 整单上传的图片数组
      userInfo: {
        openid: "",     // 微信openid
        nickname: "",       // 微信昵称
        avatar: "",       // 微信头像
      }

    }
  },
  methods: {
    evaluate(i) {
      this.oevaluateList[i].fold = this.oevaluateList[i].fold ? false : true;
    },
    // 上传图片，删除上传的图片
    handleRemove() {
      console.log("");
    },
    // 弹框放大的图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传图片前
    beforeUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < 5;     // 限制上传图片大小5M
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      const isJPEG = file.type === "image/jpeg";
      let bool = false;
      if(!isLt10M) {
        this.$MessageAlert(true, "上传头像图片大小不能超过 5MB!", "error");
      }
      if (!isJPG && !isPNG && !isJPEG) {
        this.$MessageAlert(true, "上传头像图片只能是 JPG、PNG、JPEG 格式!", "error");
        bool = false;
      } else {
        bool = true;
      }
      return bool && isLt10M;
    },
    // 上传成功
    uploadSuccess(fileList) {
      this.oevaluateList[this.imgIndex].dialogImageUrl = fileList;
    },
    // 上传失败
    uploadError() {
      this.$MessageAlert(true, "上传失败，请重新上传", "error");
    },
    // 上传文件时就监听
    handleChange(index) {
      this.imgIndex = index;
      // this.oevaluateList[index].dialogImageUrl = fileList;
    },
    // 提交评价
    submitComments() {
      var _this = this;
      let scoreArr = [];    // 评分
      let commentArr = [];    // 评论
      _this.oevaluateList.forEach((element, index)=>{
        // 判断单个商品评分，当每个商品的评分都不为空时，添加到数组
        if(element.score !== null && element.score !== 0) {
          scoreArr.push(index);   // 有评分的商品数组下标
        }
        // 判断单个商品评论，当每个商品的评论都不为空时，添加到数组
        if(element.comment !== null && element.comment !== "") {
          commentArr.push(index);   // 有评论的商品数组下标
        }

      });
      // 可以评价，第一次评价
      if(_this.oevaluateList[0].iscomment === 0) {
        // 判断，有填写评分的数组长度是否和商品的长度一样，一样就是全部都填写了评分
        if(scoreArr.length == _this.oevaluateList.length && commentArr.length == _this.oevaluateList.length) {
          // 判断商品数组长度，是否大于1
          if(_this.oevaluateList.length > 1) {
            // conosle.log(_this.oevaluateList);
            // 循环多个商品的数组
            for (let i = 0; i < _this.oevaluateList.length; i++) {
              let form = new FormData();
              form.append("openid", _this.userInfo.openid);
              form.append("order_id", _this.oevaluateList[i].orderid);
              form.append("goods_id", _this.oevaluateList[i].goodsid);
              form.append("nickname", _this.userInfo.nickname);
              form.append("headimgurl", _this.userInfo.avatar);
              form.append("level", _this.oevaluateList[i].score);
              form.append("content", _this.oevaluateList[i].comment);

              // 判断当前商品，是否有上传图片
              if(_this.oevaluateList[i].dialogImageUrl.length > 0) {
                let ImageUrlArr = _this.oevaluateList[i].dialogImageUrl;
                // 有上传图片，循环当前商品，上传的图片数组
                for (let j = 0; j < ImageUrlArr.length; j++) {
                  form.append("images[]", ImageUrlArr[j].raw);
                }
                // 评论接口
                _this.$post("user/order/comment", form
                ).then(res=>{
                  if(res.code == 204) {
                    if(i == _this.oevaluateList.length - 1) {
                      _this.$store.commit("orderEvaluation", []);                       // 清空在vuex评论的数据
                      _this.$router.push({"path": "/accountInformation/myorder"});      // 跳到我的订单页面
                    }
                  }
                })
              } else {
                // let form = new FormData();
                form.append("images[]", "");
                // 评论接口
                _this.$post("user/order/comment", form
                ).then(res=>{
                  if(res.code == 204) {
                    if(i == _this.oevaluateList.length - 1) {
                      _this.$store.commit("orderEvaluation", []);                       // 清空在vuex评论的数据
                      _this.$router.push({"path": "/accountInformation/myorder"});      // 跳到我的订单页面
                    }
                  }
                })
                
              }
            }
            // 评论测试0001，商品测试1，多个商品测试，上传图片测试，2021/1/30 17:01
          } else {
            let form = new FormData();
            form.append("openid", _this.userInfo.openid);
            form.append("order_id", _this.oevaluateList[0].orderid);
            form.append("goods_id", _this.oevaluateList[0].goodsid);
            form.append("nickname", _this.userInfo.nickname);
            form.append("headimgurl", _this.userInfo.avatar);
            form.append("level", _this.oevaluateList[0].score);
            form.append("content", _this.oevaluateList[0].comment);

            // 判断当前商品，是否有上传图片
            if(_this.oevaluateList[0].dialogImageUrl.length > 0) {
              
              let ImageUrlArr = _this.oevaluateList[0].dialogImageUrl;
              // 有上传图片，循环当前商品，上传的图片数组
              for (let j = 0; j < ImageUrlArr.length; j++) {
                form.append("images[]", ImageUrlArr[j].raw);
              }
              // 评论接口
              _this.$post("user/order/comment", form
              ).then(res=>{
                if(res.code == 204) {
                  _this.$store.commit("orderEvaluation", []);                       // 清空在vuex评论的数据
                  _this.$router.push({"path": "/accountInformation/myorder"});      // 跳到我的订单页面
                }
              })
            } else {
              // 没有上传图片
              form.append("images[]", "");
              // 评论接口
              _this.$post("user/order/comment", form
              ).then(res=>{
                if(res.code == 204) {
                  _this.$store.commit("orderEvaluation", []);                       // 清空在vuex评论的数据
                  _this.$router.push({"path": "/accountInformation/myorder"});      // 跳到我的订单页面
                }
              })
              
            }
          }
        } else {
          // 判断，评论数组和商品数组不一样长
          if(commentArr.length != _this.oevaluateList.length){
            _this.$MessageAlert(true, "说点什么吧！", "error");
          } else {
            // 除去评论，剩下就是评分了
            _this.$MessageAlert(true, "还没评分！", "error");
          }
        }
      } else if(_this.oevaluateList[0].iscomment === 1) {
        // 追加评价
        if(commentArr.length == _this.oevaluateList.length) {

          // 判断追加评论的商品数组长度，是否大于1
          if(_this.oevaluateList.length > 1) {
            // 追加评论，有多个商品
            // 循环追加评论的多个商品的数组
            for (let i = 0; i < _this.oevaluateList.length; i++) {
              let form = new FormData();
              form.append("openid", _this.userInfo.openid);
              form.append("order_id", _this.oevaluateList[i].orderid);
              form.append("goods_id", _this.oevaluateList[i].goodsid);
              form.append("append_content", _this.oevaluateList[i].comment);

              // 判断追加评论当前商品，是否有上传图片
              if(_this.oevaluateList[i].dialogImageUrl.length > 0) {
                
                let ImageUrlArr = _this.oevaluateList[i].dialogImageUrl;
                // 有上传图片，循环追加评论当前商品，上传的图片数组
                for (let j = 0; j < ImageUrlArr.length; j++) {
                  form.append("images[]", ImageUrlArr[j].raw);
                }
                // 追加评论接口
                _this.$post("user/order/comment/append", form
                ).then(res=>{
                  if(res.code == 204) {
                    if(i == _this.oevaluateList.length - 1) {
                      _this.$store.commit("orderEvaluation", []);                       // 清空在vuex评论的数据
                      _this.$router.push({"path": "/accountInformation/myorder"});      // 跳到我的订单页面
                    }
                  }
                })
                
              } else {
                form.append("images[]", "");
                // 追加评论接口
                _this.$post("user/order/comment/append", form
                ).then(res=>{
                  if(res.code == 204) {
                    if(i == _this.oevaluateList.length - 1) {
                      _this.$store.commit("orderEvaluation", []);                       // 清空在vuex评论的数据
                      _this.$router.push({"path": "/accountInformation/myorder"});      // 跳到我的订单页面
                    }
                  }
                })
                
              }
            }
            

            // 追加评论测试0001，商品测试1，多个商品测试，上传图片测试，2021/1/30 17:01
          } else {
            // 追加评论，只有一个商品追加评论
            let form = new FormData();
            form.append("openid", _this.userInfo.openid);
            form.append("order_id", _this.oevaluateList[0].orderid);
            form.append("goods_id", _this.oevaluateList[0].goodsid);
            form.append("append_content", _this.oevaluateList[0].comment);
            // 判断追加评论的当前商品，是否有上传图片
            if(_this.oevaluateList[0].dialogImageUrl.length > 0) {
              
              let ImageUrlArr = _this.oevaluateList[0].dialogImageUrl;
              // 有上传图片，循环追加评论当前商品，上传的图片数组
              for (let j = 0; j < ImageUrlArr.length; j++) {
                form.append("images[]", ImageUrlArr[j].raw);
              }
              // 追加评论接口
              _this.$post("user/order/comment/append", form
              ).then(res=>{
                if(res.code == 204) {
                  _this.$store.commit("orderEvaluation", []);                       // 清空在vuex评论的数据
                  _this.$router.push({"path": "/accountInformation/myorder"});      // 跳到我的订单页面
                }
              })
              
            } else {
              // 追加评论，没有上传图片
              form.append("images[]", "");
              // 追加评论接口
              _this.$post("user/order/comment/append", form
              ).then(res=>{
                if(res.code == 204) {
                  _this.$store.commit("orderEvaluation", []);                       // 清空在vuex评论的数据
                  _this.$router.push({"path": "/accountInformation/myorder"});      // 跳到我的订单页面
                }
              })
            }
          }

        } else {
          // 判断，评论数组和追加评论商品数组不一样长
          if(commentArr.length != _this.oevaluateList.length){
            _this.$MessageAlert(true, "说点什么吧！", "error");
          }
        }
      }
    }
  },
  created () {
    var _this = this;
    let arr = JSON.parse(JSON.stringify(_this.$store.state.Oevaluate));    // 获取vuex的数据
    // 判断是否有评论数据
    if(arr.length > 0) {
      _this.hide = true;
      arr.forEach((element) => {
        element.fold = true;   // 是否显示单个评论
        element.score = null;     // 评分
        element.comment = null;     // 评论
        element.dialogImageUrl = [];      // 晒图

      });
      // 评价
      if(arr[0].iscomment == 0) {
        _this.scoreBool = true;
        // _this.scoreTitle = "评价";
        _this.scoreTitle = _this.$t("GoodsDetail.evaluate");
      } else if(arr[0].iscomment == 1) {
        // 追加评价
        _this.scoreBool = false;
        _this.scoreTitle = _this.$t("MyOrder.additionalEvaluation");
        // _this.scoreTitle = "追加评价";
      }
      _this.oevaluateList = arr;
      if(_this.$Cookie.getCookie("userID") !== undefined && _this.$Cookie.getCookie("userID") !== "") {
        // 获取个人用户信息
        _this.$get(`user/info/${_this.$Cookie.getCookie("userID")}`
        ).then(res=>{
          if(res.code == 200) {
            _this.userInfo.openid = res.data.openid;
            _this.userInfo.nickname = res.data.nickname;
            _this.userInfo.avatar = res.data.avatar;
          }
        })
      }
      
    } else {
      _this.hide = false;
    }
  }
}
</script>

<style lang="less" scoped>
h4 {
  text-transform: none;
}
.orderTitle {
  position: relative;
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
  margin-bottom: 20px;
  h3 {
    text-transform: none;
    margin: 30px 0px;
    color: #757575;
  }
  .orderText {
    font-size: 16px;
  }
}
.orderStatus {
  margin-bottom: 30px;
  h4 {
    color: #333;
    margin: 10px 0px;
  }
  .ul_li_table {
    line-height: 100px;
    color: #444;
    // width: 80%;
    width: 100%;
    max-width: 100%;
    // text-align: left;
    tr {
      line-height: 70px;
      .detail_Text {
          max-width: 320px;
          display: inline-block;
          vertical-align: middle;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          a {
            color: #444;
            text-decoration: none;
          }
      }
      td:nth-child(1) {
        width: 100px;
      }
      td:last-child {
        width: 100px;
        span {
          cursor: pointer;
        }
      }
    }
    .detail_Img {
      height: 64px;
      width: 64px;
      display: inline-block;
      img {
          height: auto;
          width: auto;
      }
    }
  }
  
}
/deep/ .el-rate {
  display: inline-block;
  // vertical-align: middle;
}
/deep/ .el-rate__item {
  vertical-align: top !important;
}
/deep/ .el-rate__icon {
  vertical-align: top !important;
}
.single {
  margin-top: 20px;
  li {
    padding: 15px 0px;
  }
}
.evaluateText {
  display: inline-block;
  // margin-top: 20px;
  width: 100px;
  vertical-align: top;
  // height: 50px;
  // line-height: 50px;
  text-align: center;
  .required {
    display: inline-block;
    font-style: normal;
    margin-left: 4px;
    font-size: 15px;
    color: red;
    vertical-align: middle;
    // line-height: 15px;
  }
}
/deep/ .el-textarea {
  width: calc(100% - 100px);
}
.uploadPictures {
  display: inline-block;
}
/deep/ .el-upload__input {
  display: none;
}
/deep/ .el-upload {
  border: 1px dashed #ccc;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/ .el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 0px;
}
/deep/ .el-upload-list__item {
  width: 100px !important;
  height: 100px !important;
  border-radius: 0px !important;
}
.commodityEvaluation {
  border-bottom: 1px solid #ddd;
  padding: 12px 0px;
}

.submit {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 100px;
  button {
    // float: right;
    // border: 1px solid #ccc;
    padding: 8px 30px;
    border: 1px solid #888;
  }
  
}
.noData {
  font-size: 22px;
  margin-top: 100px;
  text-align: center;
}
// .avatar-uploader {
//   display: inline-block;
// }
// .avatar-uploader-icon {
//   font-size: 28px;
//   color: #8c939d;
//   width: 100px;
//   height: 100px;
//   line-height: 100px;
//   text-align: center;
// }

// .avatar {
//   width: 100px;
//   height: 100px;
//   display: block;
// }

</style>